import React from 'react';
import { Layout, Menu, Button } from 'antd';
import { Link, connect } from 'umi';
import logo from '../assets/logo.png';
const { Header, Content, Footer } = Layout;

function BasicLayout(props: any) {
  const logout = () => {
    props.dispatch({
      type: 'login/logout',
    });
  };

  return (
    <Layout style={{ height: '100%' }}>
      <Header>
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={['2']}
          style={{ lineHeight: '64px', fontFamily: 'global' }}
        >
          <Menu.Item>
            <img src={logo} style={{ width: '60px' }} />
          </Menu.Item>
          <Menu.Item key="1">
            <Link to="map">地图看板</Link>
          </Menu.Item>
          <Menu.Item key="2">
            <Link to="all">分屏看板</Link>
          </Menu.Item>
          <Menu.Item key="3">
            <Link to="all">返回上一级</Link>
          </Menu.Item>
          <Menu.Item key="4">
            <Button onClick={logout}>Logout</Button>
          </Menu.Item>
        </Menu>
      </Header>
      <Content style={{ padding: '0 20px', height: '100%' }}>
        <iframe
          src="http://120.79.77.107:10000/play.html?serial=34020000001320000014&code=34020000001320000014&aspect=fullscreen"
          width="50%"
          height="50%"
          allow="autoplay; fullscreen"
        ></iframe>
        <iframe
          src="http://120.79.77.107:10000/play.html?serial=34020000001320000010&code=34020000001310000001&aspect=fullscreen"
          width="50%"
          height="50%"
          allow="autoplay; fullscreen"
        ></iframe>
        <iframe
          src="http://120.79.77.107:10000/play.html?serial=34020000001320000012&code=34020000001310000012&aspect=fullscreen"
          width="50%"
          height="50%"
          allow="autoplay; fullscreen"
        ></iframe>
        <iframe
          src="http://120.79.77.107:10000/play.html?serial=34020000001320000021&code=34020000001320000021&aspect=fullscreen"
          width="50%"
          height="50%"
          allow="autoplay; fullscreen"
        ></iframe>
        {props.children}
      </Content>
      <Footer style={{ textAlign: 'center' }}>深高速AI监控平台</Footer>
    </Layout>
  );
}

export default connect()(BasicLayout);
